<template>
  <div class="allOrderContainer">
    <div class="actions">
      <div class="left">
        <el-button
          type="primary"
          data-tracker="P32-1"
          plain
          @click="AddProductTypePopFn"
          style="margin: 0px 0px 10px 0px"
          v-permission="'transportType_create'"
          ><i class="el-icon-plus"></i> 新增</el-button
        >
      </div>
    </div>
    <el-table
      ref="singleTable"
      border
      :data="tableData"
      highlight-current-row
      style="width: 100%"
      stripe
    >
      <el-table-column type="index" label="序号" width="50"> </el-table-column>
      <el-table-column property="name" label="承运类型名称" width="300">
      </el-table-column>
      <el-table-column property="dictionary_code" label="承运类型流程">
        <template slot-scope="scope">
          {{
            scope.row.config
              ? scope.row.config.transport_node.is_collect === true
                ? "揽收 -> "
                : ""
              : ""
          }}
          {{
            scope.row.config
              ? scope.row.config.transport_node.is_line_dispatch === true
                ? "干线/支线 ->"
                : ""
              : ""
          }}
          {{
            scope.row.config
              ? scope.row.config.transport_node.is_distribution === true
                ? "配送 ->"
                : ""
              : ""
          }}
          {{
            scope.row.config
              ? scope.row.config.transport_node.is_sign === true
                ? "签收 ->"
                : ""
              : ""
          }}
          {{
            scope.row.config
              ? scope.row.config.transport_node.is_receipt === true
                ? "回单 ->"
                : ""
              : ""
          }}
          {{
            scope.row.config
              ? scope.row.config.transport_node.is_return_box === true
                ? "回箱"
                : ""
              : ""
          }}
        </template>
      </el-table-column>
      <el-table-column property="remark" label="描述" width="300">
      </el-table-column>
      <el-table-column property="is_disable" label="是否启用" width="100">
        <template slot-scope="scope">
          {{ scope.row.is_disable === 0 ? "启用" : "禁用" }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="160">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            data-tracker="P32-2"
            @click="handleDetail(scope.row)"
            v-permission="'transportType_detail'"
            >详情</el-button
          >
          <el-button
            type="text"
            size="mini"
            data-tracker="P32-3"
            @click="handleEdit(scope.row)"
            v-permission="'transportType_update'"
            >编辑</el-button
          >
          <el-button
            type="text"
            size="mini"
            data-tracker="P32-4"
            @click="handleAddconfigure(scope.row)"
            v-permission="'transportType_isDisable_update'"
            >是否启用</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="新增承运类型"
      :close-on-click-modal="false"
      :visible.sync="AddcenterDialogVisible"
      width="35%"
    >
      <el-form
        :model="ruleFormAdd"
        status-icon
        :rules="rulesAdd"
        ref="ruleFormAdd"
        label-width="120px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="承运类型名称" prop="datachildname">
          <el-input
            type="text"
            v-model="ruleFormAdd.datachildname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="业务类型" prop="preservation">
            <el-select v-model="ruleFormAdd.preservation">
              <el-option
                v-for="(item, index) in preservationData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="业务类型" prop="isincubator">
          <el-select v-model="ruleFormAdd.isincubator">
            <el-option
              v-for="(item, index) in isincubatorData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否整车" prop="isincubator">
          <el-select v-model="ruleFormAdd.iscompletevehicle">
            <el-option
              v-for="(item, index) in iscompletevehicleData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="datachildDsec">
          <el-input
            type="textarea"
            v-model.number="ruleFormAdd.datachildDsec"
          ></el-input>
        </el-form-item>
        <hr />
        <div style="margin-top: 20px">
          <el-checkbox
            v-model="ruleFormAdd.checked1"
            :disabled="!product_type_info.includes('1')"
            >提货</el-checkbox
          >
          <el-checkbox
            :disabled="!product_type_info.includes('2')"
            v-model="ruleFormAdd.checked2"
            >干线/支线</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormAdd.checked3"
            :disabled="!product_type_info.includes('3')"
            >配送</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormAdd.checked4"
            :disabled="!product_type_info.includes('4')"
            >签收</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormAdd.checked5"
            :disabled="!product_type_info.includes('5')"
            >回单</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormAdd.checked6"
            :disabled="!product_type_info.includes('6')"
            >回箱</el-checkbox
          >
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button data-tracker="P32-6" @click="AddcenterDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          data-tracker="P32-5"
          @click="AddProductTypeFn('ruleFormAdd')"
          >确 定</el-button
        >
        <el-button type="primary" @click="resetForm('ruleFormAdd')"
          >重置</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="编辑承运类型"
      :close-on-click-modal="false"
      :visible.sync="EditcenterDialogVisible"
      width="35%"
    >
      <el-form
        :model="ruleFormEdit"
        status-icon
        :rules="rulesEdit"
        ref="ruleFormEdit"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="承运类型名称" prop="datachildname">
          <el-input
            type="text"
            v-model="ruleFormEdit.datachildname"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="业务类型" prop="preservation">
            <el-select v-model="ruleFormEdit.preservation">
              <el-option
                v-for="(item, index) in preservationData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="业务类型" prop="isincubator">
          <el-select v-model="ruleFormEdit.isincubator">
            <el-option
              v-for="(item, index) in isincubatorData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否整车" prop="isincubator">
          <el-select v-model="ruleFormEdit.iscompletevehicle">
            <el-option
              v-for="(item, index) in iscompletevehicleData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="datachildDsec">
          <el-input
            type="textarea"
            v-model.number="ruleFormEdit.datachildDsec"
          ></el-input>
        </el-form-item>
        <hr />
        <div style="margin-top: 20px">
          <el-checkbox
            v-model="ruleFormEdit.checked1"
            :disabled="!product_type_info.includes('1')"
            >提货</el-checkbox
          >
          <el-checkbox
            :disabled="!product_type_info.includes('2')"
            v-model="ruleFormEdit.checked2"
            >干线/支线</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormEdit.checked3"
            :disabled="!product_type_info.includes('3')"
            >配送</el-checkbox
          >
          <el-checkbox
            :disabled="!product_type_info.includes('4')"
            v-model="ruleFormEdit.checked4"
            >签收</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormEdit.checked5"
            :disabled="!product_type_info.includes('5')"
            >回单</el-checkbox
          >
          <el-checkbox
            v-model="ruleFormEdit.checked6"
            :disabled="!product_type_info.includes('6')"
            >回箱</el-checkbox
          >
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button data-tracker="P32-8" @click="EditcenterDialogVisible = false"
          >取 消</el-button
        >
        <el-button
          type="primary"
          data-tracker="P32-7"
          @click="EditProductTypeFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="承运类型详情"
      :close-on-click-modal="false"
      :visible.sync="DetailcenterDialogVisible"
      width="35%"
    >
      <el-form
        :model="ruleFormDetail"
        status-icon
        :rules="rulesDetail"
        ref="ruleFormDetail"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="承运类型名称" prop="datachildname">
          <el-input
            type="text"
            v-model="ruleFormDetail.datachildname"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="业务类型" prop="preservation">
            <el-select v-model="ruleFormDetail.preservation" disabled>
              <el-option
                v-for="(item, index) in preservationData"
                :key="index"
                :value="item.item_code"
                :label="item.item_name"
              ></el-option>
            </el-select>
          </el-form-item> -->
        <el-form-item label="业务类型" prop="isincubator">
          <el-select v-model="ruleFormDetail.isincubator" disabled>
            <el-option
              v-for="(item, index) in isincubatorData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否整车" prop="isincubator">
          <el-select v-model="ruleFormDetail.iscompletevehicle" disabled>
            <el-option
              v-for="(item, index) in iscompletevehicleData"
              :key="index"
              :value="item.item_code"
              :label="item.item_name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="datachildDsec">
          <el-input
            type="textarea"
            v-model.number="ruleFormDetail.datachildDsec"
            disabled
          ></el-input>
        </el-form-item>
        <hr />
        <div style="margin-top: 20px">
          <el-checkbox v-model="ruleFormDetail.checked1" disabled
            >提货</el-checkbox
          >
          <el-checkbox v-model="ruleFormDetail.checked2" disabled
            >干线/支线</el-checkbox
          >
          <el-checkbox v-model="ruleFormDetail.checked3" disabled
            >配送</el-checkbox
          >
          <el-checkbox v-model="ruleFormDetail.checked4" disabled
            >签收</el-checkbox
          >
          <el-checkbox v-model="ruleFormDetail.checked5" disabled
            >回单</el-checkbox
          >
          <el-checkbox v-model="ruleFormDetail.checked6" disabled
            >回箱</el-checkbox
          >
        </div>
      </el-form>
    </el-dialog>
    <el-dialog
      title="承运类型是否启用"
      :close-on-click-modal="false"
      :visible.sync="isDisableDialogVisible"
      width="35%"
    >
      <el-form
        :model="ruleFormisable"
        status-icon
        :rules="rulesisable"
        ref="ruleFormisable"
        label-width="100px"
        class="demo-ruleForm"
        style="width: 100%"
      >
        <el-form-item label="是否启用" prop="radio">
          <el-radio v-model="ruleFormisable.radio" label="0">启用</el-radio>
          <el-radio v-model="ruleFormisable.radio" label="1">禁用</el-radio>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDisableDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="isDisableProductTypeFn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  TransportTypeList,
  TransportTypeCreate,
  TransportTypeEdit,
  TransportTypeIsDisable,
} from "@/api/producttype";
import { reqDictionaryOptions } from "@/api/earlywarning";
export default {
  name: "producttype",
  data() {
    return {
      AddcenterDialogVisible: false,
      EditcenterDialogVisible: false,
      DetailcenterDialogVisible: false,
      isDisableDialogVisible: false,
      isDisableDialogVisible: false,
      ruleFormAdd: {
        datachildname: "",
        datachildDsec: "",
        preservation: "",
        isincubator: "",
        iscompletevehicle: "",
        checked1: false,
        checked2: false,
        checked3: false,
        checked4: false,
        checked5: false,
        checked6: false,
      },
      rulesAdd: {
        datachildname: [
          { required: true, message: "请输入承运类型名称", trigger: "blur" },
        ],
      },
      ruleFormEdit: {
        datachildname: "",
        datachildDsec: "",
        preservation: "",
        isincubator: "",
        iscompletevehicle: "",
        checked1: false,
        checked2: false,
        checked3: false,
        checked4: false,
        checked5: false,
        checked6: false,
      },
      rulesEdit: {},
      ruleFormDetail: {
        datachildname: "",
        datachildDsec: "",
        preservation: "",
        isincubator: "",
        iscompletevehicle: "",
        checked1: false,
        checked2: false,
        checked3: false,
        checked4: false,
        checked5: false,
        checked6: false,
      },
      rulesDetail: {},
      ruleFormisable: {
        radio: "0",
      },
      rulesisable: {},
      tableData: [
        {
          dictionary_name: "",
          dictionary_code: "",
          remark: "",
        },
      ],
      isabelId: "",
      preservationData: [],
      isincubatorData: [],
      iscompletevehicleData: [], //是否是整车
      editorId: "",
      product_service_version: "",
      product_type_info: [],
    };
  },
  watch: {},
  created() {
    this.TransportTypeListFn();
    // this.PreservationFn()业务类型没有使用到
    this.isincubatorFn();
    this.iscompletevehicleFn();
  },
  mounted() {
    this.product_service_version = JSON.parse(
      localStorage.getItem("user")
    ).product_service_version;
    this.product_type_info =
      JSON.parse(localStorage.getItem("user")).product_type_info || [];
    // 把能选的默认勾选
    this.product_type_info.forEach((i) => {
      this.ruleFormAdd[`checked${i}`] = true;
    });
  },
  methods: {
    //业务类型
    PreservationFn() {
      const data = {
        dictionary_code: "preservation_box",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.preservationData = res.data.list;
        }
      });
    },
    isincubatorFn() {
      const data = {
        dictionary_code: "is_incubator",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.isincubatorData = res.data.list;
        }
      });
    },
    iscompletevehicleFn() {
      const data = {
        dictionary_code: "is_complete_vehicle",
      };
      reqDictionaryOptions(data).then((res) => {
        if (res.code === 10000 || res.data.list.length > 0) {
          this.iscompletevehicleData = res.data.list;
        }
      });
    },
    handleAddconfigure(valid) {
      this.isDisableDialogVisible = true;
      this.isabelId = valid.id;
    },
    isDisableProductTypeFn() {
      const data = {
        id: this.isabelId.toString(),
        param: this.ruleFormisable.radio,
      };
      TransportTypeIsDisable(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "修改状态值成功",
          });
          this.isDisableDialogVisible = false;
          this.TransportTypeListFn();
        }
      });
    },
    //创建承运类型
    AddProductTypePopFn() {
      this.AddcenterDialogVisible = true;
    },
    //创建承运类型保存函数
    AddProductTypeFn(formName) {
      const data = {
        name: this.ruleFormAdd.datachildname,
        remark: this.ruleFormAdd.datachildDsec,
        config: {
          transport_node: {
            is_collect: this.ruleFormAdd.checked1,
            is_line_dispatch: this.ruleFormAdd.checked2,
            is_distribution: this.ruleFormAdd.checked3,
            is_sign: this.ruleFormAdd.checked4,
            is_receipt: this.ruleFormAdd.checked5,
            is_return_box: this.ruleFormAdd.checked6,
          },
          is_incubator: this.ruleFormAdd.isincubator.toString(),
          is_complete_vehicle: this.ruleFormAdd.iscompletevehicle.toString(),
        },
      };
      this.$refs[formName].validate((valid) => {
        if (valid) {
          TransportTypeCreate(data).then((res) => {
            if (res.code === 10000) {
              this.$message({
                type: "success",
                message: "创建承运类型成功",
              });
              this.AddcenterDialogVisible = false;
              this.TransportTypeListFn();
            }
          });
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //编辑承运类型
    handleEdit(val) {
      this.EditcenterDialogVisible = true;
      this.ruleFormEdit.datachildname = val.name;
      this.ruleFormEdit.datachildDsec = val.remark;
      this.ruleFormEdit.isincubator = val.config.is_incubator.toString();
      this.ruleFormEdit.iscompletevehicle =
        val.config.is_complete_vehicle.toString();
      this.ruleFormEdit.checked1 = val.config.transport_node.is_collect;
      this.ruleFormEdit.checked2 = val.config.transport_node.is_line_dispatch;
      this.ruleFormEdit.checked3 = val.config.transport_node.is_distribution;
      this.ruleFormEdit.checked4 = val.config.transport_node.is_sign;
      this.ruleFormEdit.checked5 = val.config.transport_node.is_receipt;
      this.ruleFormEdit.checked6 = val.config.transport_node.is_return_box;
      this.editorId = val.id;
    },
    EditProductTypeFn() {
      const data = {
        id: this.editorId.toString(),
        name: this.ruleFormEdit.datachildname,
        remark: this.ruleFormEdit.datachildDsec,
        config: {
          transport_node: {
            is_collect: this.ruleFormEdit.checked1,
            is_line_dispatch: this.ruleFormEdit.checked2,
            is_distribution: this.ruleFormEdit.checked3,
            is_sign: this.ruleFormEdit.checked4,
            is_receipt: this.ruleFormEdit.checked5,
            is_return_box: this.ruleFormEdit.checked6,
          },
          is_incubator: this.ruleFormEdit.isincubator.toString(),
          is_complete_vehicle: this.ruleFormEdit.iscompletevehicle.toString(),
        },
      };
      TransportTypeEdit(data).then((res) => {
        if (res.code === 10000) {
          this.$message({
            type: "success",
            message: "编辑承运类型成功",
          });
          this.EditcenterDialogVisible = false;
          this.TransportTypeListFn();
        }
      });
    },
    handleDetail(val) {
      this.DetailcenterDialogVisible = true;
      this.ruleFormDetail.datachildname = val.name;
      this.ruleFormDetail.datachildDsec = val.remark;
      this.ruleFormDetail.isincubator = val.config.is_incubator;
      this.ruleFormDetail.iscompletevehicle = val.config.is_complete_vehicle;
      this.ruleFormDetail.checked1 = val.config.transport_node.is_collect;
      this.ruleFormDetail.checked2 = val.config.transport_node.is_line_dispatch;
      this.ruleFormDetail.checked3 = val.config.transport_node.is_distribution;
      this.ruleFormDetail.checked4 = val.config.transport_node.is_sign;
      this.ruleFormDetail.checked5 = val.config.transport_node.is_receipt;
      this.ruleFormDetail.checked6 = val.config.transport_node.is_return_box;
    },
    //承运类型列表
    TransportTypeListFn() {
      const data = {};
      TransportTypeList(data).then((res) => {
        if (res.code === 10000) {
          this.tableData = res.data;
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.allOrderContainer {
  padding: 10px 15px;
  background-color: #fff;
  .actions {
    display: flex;
    justify-content: space-between;
    background-color: #fff;
    // padding: 5px 0;
    .right {
      ::v-deep .el-pagination {
        display: inline-block;
        .el-input--mini .el-input__inner {
          height: 24px;
        }
      }
    }
  }
}
</style>